<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习2</title>
    <style>
        body{
            height: 3000px;
        }
        .container{
            width: 1000px;
            height: 200px;
            margin: 50px auto 0;
            background-color: rgb(70, 70, 70);
            padding:1px;
        }
        .wdj{
            /* background-color: rgb(250, 203, 203); */
            /* height: 10px; */
            width: 400px;
            margin: 50px auto 0;
            /* outline: 1px solid red; */
            position: relative;
        }
        .kd{
            height: 8px;
            /* background-color: rgb(238, 168, 168); */
            border-radius:8px ;
            background-image: linear-gradient(to right,blue,red 60%,black 60%);
            

        }
        .kd2{
            height: 8px;
            width: 240px;
            border-radius:8px 0 0 8px;
            background-color: rgba(255, 99, 99, 0.486);
            position: absolute;
            top: 0;
            left: 0;
            background-image:linear-gradient(to bottom,rgba(0, 0, 0, 0.37),rgba(255, 255, 255, 0.397),rgba(0, 0, 0, 0.5))
        }
        .circle{
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top:-6px

        }
        .j{
            width: 20px;
        }
        .j1{
            height: 50px;
            background-color: rgb(206, 79, 79);
            background-image: linear-gradient(to right,yellow,white 40%,yellow 60%);
        }
        .j2{
            height: 100px;
            background-image: linear-gradient(to right,red,white 40%,red 60%);
        }
        .jgb{
            width: 50px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="container ">
        <div class="wdj">
            <div class="kd"></div>
            <div class="kd2"></div>
            <div class="circle"></div>
        </div>
    </div>
    <div class="jgb">
        <div class="j j1"></div>
        <div class="j j2"></div>
        <div class="j j1"></div>
    </div>
</body>
</html>